<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>全局函数 | Awesome-笔记</title>
    <meta name="generator" content="VuePress 1.9.10">
    <link rel="icon" href="icons/favicon.ico">
    <meta name="description" content="">
    <meta name="author" content="热爱生活，喜欢睡觉">
    <meta name="about" content="这是一个专门用于记录笔记的静态资源网站">
    
    <link rel="preload" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css" as="style"><link rel="preload" href="/awesome-notebook/assets/js/app.5520c9b0.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/2.778bb4ad.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/1.50b457b8.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/29.dc9b14bd.js" as="script"><link rel="prefetch" href="/awesome-notebook/assets/js/10.325b9f09.js"><link rel="prefetch" href="/awesome-notebook/assets/js/11.c62b6b34.js"><link rel="prefetch" href="/awesome-notebook/assets/js/12.ecdb524b.js"><link rel="prefetch" href="/awesome-notebook/assets/js/13.3f3f6a36.js"><link rel="prefetch" href="/awesome-notebook/assets/js/14.eb7a3d07.js"><link rel="prefetch" href="/awesome-notebook/assets/js/15.114dfd5c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/16.85253907.js"><link rel="prefetch" href="/awesome-notebook/assets/js/17.c2838453.js"><link rel="prefetch" href="/awesome-notebook/assets/js/18.3256f17f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/19.d8afd0ae.js"><link rel="prefetch" href="/awesome-notebook/assets/js/20.10e47ab9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/21.33b300c9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/22.b7c97fbe.js"><link rel="prefetch" href="/awesome-notebook/assets/js/23.e9994ecc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/24.8cc3e1e8.js"><link rel="prefetch" href="/awesome-notebook/assets/js/25.dedb1585.js"><link rel="prefetch" href="/awesome-notebook/assets/js/26.9422829f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/27.9802cd87.js"><link rel="prefetch" href="/awesome-notebook/assets/js/28.d9f287bc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/3.af33e5d6.js"><link rel="prefetch" href="/awesome-notebook/assets/js/30.645d0efa.js"><link rel="prefetch" href="/awesome-notebook/assets/js/31.164808cf.js"><link rel="prefetch" href="/awesome-notebook/assets/js/32.59287e4c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/33.3031be3e.js"><link rel="prefetch" href="/awesome-notebook/assets/js/34.4ce6ff0d.js"><link rel="prefetch" href="/awesome-notebook/assets/js/35.d58eebcc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/4.45665f8a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/5.7098d77a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/6.0c0a0f39.js"><link rel="prefetch" href="/awesome-notebook/assets/js/7.6a854e57.js"><link rel="prefetch" href="/awesome-notebook/assets/js/vendors~docsearch.5e19b665.js">
    <link rel="stylesheet" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/awesome-notebook/" class="home-link router-link-active"><img src="/awesome-notebook/imgs/hero.png" alt="Awesome-笔记" class="logo"> <span class="site-name can-hide">Awesome-笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>全局函数</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#settimeout" class="sidebar-link">setTimeout()</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#数组常规方法-增删改查" class="sidebar-link">数组常规方法：增删改查</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#数组末尾-删除-并返回-pop" class="sidebar-link">数组末尾 删除 并返回 pop()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#数组末尾-添加-push" class="sidebar-link">数组末尾 添加 push()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#数组头部-删除-shift" class="sidebar-link">数组头部 删除 shift()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#数组头部-添加-unshift" class="sidebar-link">数组头部 添加 unshift()</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#数组切片-slice" class="sidebar-link">数组切片 slice()</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#其他元素转换为数组" class="sidebar-link">其他元素转换为数组</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#array-from" class="sidebar-link">Array.from()</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#排序与翻转" class="sidebar-link">排序与翻转</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#其他方法" class="sidebar-link">其他方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#数组扁平化-flat" class="sidebar-link">数组扁平化 flat()</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#数组连接-concat" class="sidebar-link">数组连接 concat</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#遍历专用" class="sidebar-link">遍历专用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#是否所有元素都满足指定条件" class="sidebar-link">是否所有元素都满足指定条件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#是否有元素满足指定条件-some" class="sidebar-link">是否有元素满足指定条件 some()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#依次处理数组元素得到新数组-map" class="sidebar-link">依次处理数组元素得到新数组 map()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#数组元素过滤函数-filter" class="sidebar-link">数组元素过滤函数 filter()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#依次处理数组元素累计为一个值-reduce" class="sidebar-link">依次处理数组元素累计为一个值 reduce()</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#对象方法" class="sidebar-link">对象方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#substring-方法" class="sidebar-link">substring()方法</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#replace" class="sidebar-link">replace</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#原型方法" class="sidebar-link">原型方法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#应用-实现交集、并集、差集" class="sidebar-link">应用：实现交集、并集、差集</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#原型方法-2" class="sidebar-link">原型方法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#call、apply、bind" class="sidebar-link">call、apply、bind</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#this-指向问题" class="sidebar-link">this 指向问题</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#typeof-函数及其再封装" class="sidebar-link">typeof 函数及其再封装</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#typeof-函数存在问题" class="sidebar-link">typeof 函数存在问题</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#object-prototype-tostring-call-方法" class="sidebar-link">Object.prototype.toString.call()方法</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#对象方法-2" class="sidebar-link">对象方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#objdect-create" class="sidebar-link">Objdect.create()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#object-defineproperty" class="sidebar-link">Object.defineProperty()</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#对象属性" class="sidebar-link">对象属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#host" class="sidebar-link">host</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#hostname" class="sidebar-link">hostname</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#pathname" class="sidebar-link">pathname</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#seacrchparams" class="sidebar-link">seacrchParams</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#blob-slice-方法" class="sidebar-link">Blob.slice()方法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#实例方法" class="sidebar-link">实例方法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#formdata-对象使用" class="sidebar-link">FormData 对象使用</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1%E5%8F%8AAPI.html#事件" class="sidebar-link">事件</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="全局函数"><a href="#全局函数" class="header-anchor">#</a> 全局函数</h1> <h2 id="settimeout"><a href="#settimeout" class="header-anchor">#</a> setTimeout()</h2> <ul><li>语法：setTimeout(functionRef, delay, param1, param2,...)</li> <li>参数：回调函数，延迟 ms，传递给回调的参数</li></ul> <h1 id="array-数组"><a href="#array-数组" class="header-anchor">#</a> Array 数组</h1> <h2 id="数组常规方法-增删改查"><a href="#数组常规方法-增删改查" class="header-anchor">#</a> 数组常规方法：增删改查</h2> <table><thead><tr><th>数组方法</th> <th>说明</th> <th>使用举例</th></tr></thead> <tbody></tbody></table> <p>| splice() | 删除数组中的若干元素并添加若干元素 | array.splice(index,howmany,item1,.....,itemX) |
| find | 返回通过测试（函数内判断）的数组的第一个元素的值 |
| findIndex | 返回通过测试（函数内判断）的数组的第一个元素的索引 |</p> <h3 id="数组末尾-删除-并返回-pop"><a href="#数组末尾-删除-并返回-pop" class="header-anchor">#</a> 数组末尾 删除 并返回 pop()</h3> <ul><li>语法：arr.pop()</li> <li>返回值：被删除的元素</li></ul> <h3 id="数组末尾-添加-push"><a href="#数组末尾-添加-push" class="header-anchor">#</a> 数组末尾 添加 push()</h3> <ul><li>语法：arr.push(item1,item2, ..., itemX)</li> <li>返回值：返回数组新长度</li></ul> <h3 id="数组头部-删除-shift"><a href="#数组头部-删除-shift" class="header-anchor">#</a> 数组头部 删除 shift()</h3> <ul><li>语法：arr.shift()</li> <li>返回值：被删除的元素</li></ul> <h3 id="数组头部-添加-unshift"><a href="#数组头部-添加-unshift" class="header-anchor">#</a> 数组头部 添加 unshift()</h3> <ul><li>语法：arr.unshift(item1,item2, ..., itemX)</li> <li>返回值：返回数组新长度</li></ul> <h2 id="数组切片-slice"><a href="#数组切片-slice" class="header-anchor">#</a> 数组切片 slice()</h2> <ul><li>语法：arr.slice(start, end)，不包含 end
<blockquote><p>start:开始位置，负数表示从倒数位置开始提取
end:结束位置，</p></blockquote></li> <li>作用：返回原数组指定区间内的子数组，即数组切片</li></ul> <blockquote><p>注意：</p> <ol><li>start、end 参数都为可选参数</li> <li>不改变原数组</li></ol></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 返回原数组的副本</span>
arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 返回原数组  倒数第二个元素  到  最后一个元素</span>
arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//  抽取原数组中的倒数第二个元素 到 最后一个元素(不包含最后一个元素)</span>
arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="其他元素转换为数组"><a href="#其他元素转换为数组" class="header-anchor">#</a> 其他元素转换为数组</h2> <table><thead><tr><th>数组方法</th> <th>说明</th> <th>使用举例</th></tr></thead> <tbody><tr><td>Array.of()</td> <td>将一组值转换为数组，不考虑参数的数量或类型。</td> <td>Array.of(element1,...,elementn)</td></tr> <tr><td>Array.from()</td> <td>将一个拥有 length 属性的对象或可迭代的对象转化为数组</td> <td>Array.from(object, mapFunction, thisValue)</td></tr></tbody></table> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
Array.of(e1,...,en)
  e1..,en为要放在一个数组中的若干个元素
*/</span>
<span class="token keyword">let</span> myArr <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token string">&quot;李四&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">名字</span><span class="token operator">:</span> <span class="token string">&quot;王五&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myArr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['张三', 11, '李四', Array(0), {…}]</span>
</code></pre></div><h3 id="array-from"><a href="#array-from" class="header-anchor">#</a> Array.from()</h3> <ul><li>语法：Array.from(obj,mapFunction,thisValue)</li> <li>作用：通过拥有 length 属性的对象或可迭代的对象来返回一个数组</li> <li>参数：obj：要转化为数组的可迭代对象，mapFunction:数组中每个元素要调用的函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 可迭代对象  &gt;&gt;  数组</span>
<span class="token keyword">let</span> myArr <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> x <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[10,20,30]</span>
<span class="token comment">// 拥有 length 属性的对象  &gt;&gt;&gt;  数组</span>
<span class="token keyword">let</span> arr1 <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[undefined,undefined,undefined,undefined]</span>
</code></pre></div><h2 id="排序与翻转"><a href="#排序与翻转" class="header-anchor">#</a> 排序与翻转</h2> <table><thead><tr><th>数组方法</th> <th>说明</th> <th>其他</th></tr></thead> <tbody><tr><td>sort()</td> <td>对数组进行排序</td> <td>改变原数组</td></tr> <tr><td>reverse()</td> <td>翻转数组</td> <td></td></tr></tbody></table> <ul><li><p>sort()方法默认按照字典顺序进行比较，即将数值转成字符串，再按照字典顺序比较。比如<code>[101,11].sort()</code>数组中的两个元素都将会被转为字符串，故 101 最终会在 11 的前面</p></li> <li><p>sort(sortFunction)可接受一个函数作为参数，<code>sortFunction(a,b)</code>接受两个参数分别表示两个数组成员，如果其返回值大于 0，表示第一个成员排在后面，否则，第一个成员排在前面</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr1 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">,</span> arr1<span class="token punctuation">,</span> arr <span class="token operator">===</span> arr1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 1, 10, 2, 3 ] [ 1, 10, 2, 3 ] true</span>
arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">-</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[ 1, 2, 3, 10 ]</span>
</code></pre></div><h2 id="其他方法"><a href="#其他方法" class="header-anchor">#</a> 其他方法</h2> <h3 id="数组扁平化-flat"><a href="#数组扁平化-flat" class="header-anchor">#</a> 数组扁平化 flat()</h3> <ul><li>语法：Array.flat(depth)</li> <li>参数：depth 表示要提取嵌套数组的深度，默认为 1</li> <li>注意：flat() 方法会移除数组中的空项</li> <li>不改变原数组</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// flat()默认只展开一层</span>
<span class="token keyword">var</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr1<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4]</span>

<span class="token comment">// flat()默认只展开一层</span>
<span class="token keyword">var</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr2<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4, [5, 6]]</span>

<span class="token comment">// 使用 Infinity，可展开任意深度的嵌套数组</span>
<span class="token keyword">var</span> arr4 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr4<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</span>
</code></pre></div><h2 id="数组连接-concat"><a href="#数组连接-concat" class="header-anchor">#</a> 数组连接 concat</h2> <ul><li>语法：arr.concat(arr1,arr2,arr3,...)</li> <li>作用：连接多个 array 数组</li></ul> <blockquote><p>不改变原数组</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;a&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;d&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;e&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;f&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> array3 <span class="token operator">=</span> array1<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>array2<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出：['a', 'b', 'c', 'd', 'e', 'f']</span>
</code></pre></div><h2 id="遍历专用"><a href="#遍历专用" class="header-anchor">#</a> 遍历专用</h2> <h4 id="数组转字符串"><a href="#数组转字符串" class="header-anchor">#</a> 数组转字符串</h4> <table><thead><tr><th>数组方法</th> <th>说明</th> <th>使用举例</th></tr></thead> <tbody><tr><td>join()</td> <td>将数组中所有元素放到一个字符串中，并通过指定的分隔符分隔</td> <td>join(sepector)</td></tr></tbody></table> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//方法一：直接遍历数组元素</span>
<span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> item <span class="token keyword">in</span> arr<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//方法二：使用数组索引</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
 forEach()方法
用于调用数组的每个元素，并将元素传递给回调函数。
array.forEach(callbackFn(currentValue, index, arr), thisValue)
callbackFn：数组中每个元素需要调用的函数。
currentValue：当前数组元素
index：当前数组元素索引
arr：当前数组元素所属于的数组

thisValue:对象作为该执行回调时使用，传递给函数，用作 &quot;this&quot; 的值。
  如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
*/</span>
array<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="是否所有元素都满足指定条件"><a href="#是否所有元素都满足指定条件" class="header-anchor">#</a> 是否所有元素都满足指定条件</h3> <ul><li>语法：arr.every(function(currentValue,index,arr),thisValue)</li> <li>作用：检测数组元素中是否所有元素都符合指定条件。</li> <li>原理：每个元素调用一次 回调函数，如果都符合（返回 true），则 every()函数返回 true，只要有一个不符合，立即停止其余元素的回调执行并返回 false</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> ages <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">checkAdult</span><span class="token punctuation">(</span><span class="token parameter">age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> age <span class="token operator">&gt;=</span> <span class="token number">18</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ages<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>checkAdult<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="是否有元素满足指定条件-some"><a href="#是否有元素满足指定条件-some" class="header-anchor">#</a> 是否有元素满足指定条件 some()</h3> <ul><li>语法：arr.some(function(currentValue,index,arr),thisValue)</li> <li>作用：检测数组元素中是否有元素符合指定条件。</li> <li>原理：每个元素调用一次 callbackFn 回调函数，只要有一个符合（返回 true），立即停止其余元素的回调执行并返回 true</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> val <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">//是偶数则返回true，arr中只要有一个是偶数就返回true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="依次处理数组元素得到新数组-map"><a href="#依次处理数组元素得到新数组-map" class="header-anchor">#</a> 依次处理数组元素得到新数组 map()</h3> <ul><li>语法：arr.map(function(currentValue,index,arr),thisValue)</li> <li>作用：通过指定函数处理数组的每个元素，并返回处理后的数组</li> <li>原理：回调函数对每个数组元素都进行一次处理并添加到待返回的新数组中</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> newArr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>sqrt<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[2,3,4,5]</span>
</code></pre></div><h3 id="数组元素过滤函数-filter"><a href="#数组元素过滤函数-filter" class="header-anchor">#</a> 数组元素过滤函数 filter()</h3> <ul><li>语法：arr.filter(function(currentValue,index,arr),thisValue)</li> <li>作用：返回数组中符合条件的元素</li> <li>原理：每个元素调用一次 回调函数，对于以当前元素为参数的回调函数，如果返回 true，则将当前元素添加到待返回的新数组中</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> ages <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">checkAdult</span><span class="token punctuation">(</span><span class="token parameter">age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> age <span class="token operator">&gt;=</span> <span class="token number">18</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> newArr <span class="token operator">=</span> ages<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>checkAdult<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[32,33,40]</span>
</code></pre></div><h3 id="依次处理数组元素累计为一个值-reduce"><a href="#依次处理数组元素累计为一个值-reduce" class="header-anchor">#</a> 依次处理数组元素累计为一个值 reduce()</h3> <ul><li>语法：arr.reduce(function(previousValue, currentValue, currentIndex, arr), initialValue)</li> <li>作用：接收一个函数作为累加器，数组中的每个值（从左到右）开始计算，最终计算为一个值。</li> <li>参数：<code>initialValue</code> 传递给函数的初始值</li> <li>注意：如果==提供了参数 initialValue==，将会赋值给回调函数的 previousValue 参数，并且 reduce 将会从数组的第一个元素开始为每个元素调用一次回调函数。如果==未提供该参数==，reduce 函数将会把数组的第一个元素赋值为 previousValue 参数，并从数组第二个为元素开始为每个元素调用一次回调函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">preVal<span class="token punctuation">,</span> curVal</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> preVal <span class="token operator">+</span> curVal<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 25</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
reduceRight() 函数
从数组的末尾向前将数组中的数组项进行计算
array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
*/</span>
<span class="token keyword">let</span> myarr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;李四&quot;</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> newArr <span class="token operator">=</span> myarr<span class="token punctuation">.</span><span class="token function">reduceRight</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">preVal<span class="token punctuation">,</span> val<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> preval <span class="token operator">+</span> <span class="token string">&quot;----&gt;&quot;</span> <span class="token operator">+</span> val <span class="token operator">+</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//1000----&gt;李四1----&gt;张三0</span>
</code></pre></div><h1 id="string-字符串"><a href="#string-字符串" class="header-anchor">#</a> String 字符串</h1> <h2 id="对象方法"><a href="#对象方法" class="header-anchor">#</a> 对象方法</h2> <h3 id="substring-方法"><a href="#substring-方法" class="header-anchor">#</a> substring()方法</h3> <blockquote><p>语法：string.substring(from, to)
描述：提取字符串中介于两个指定下标之间的字符
参数：from:必需参数，非负整数，to:可选参数，非负整数
注意：范围为左闭右开</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">&quot;Hello world!&quot;</span><span class="token punctuation">;</span>
str<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//lo world!</span>
</code></pre></div><h3 id="replace"><a href="#replace" class="header-anchor">#</a> replace</h3> <ul><li>语法：str.replace(pattern,replacement)</li> <li>参数：pattern：要匹配的子字符串或正则对象，replacement：替换文本或函数</li></ul> <blockquote><p>replacement</p> <ul><li>如果是字符串，它将替换由 pattern 匹配的子字符串。</li> <li>如果是函数，将为每个匹配调用该函数，并将其返回值用作替换文本</li></ul></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//replacement为函数时,语法如下</span>
<span class="token keyword">function</span> <span class="token function">replacer</span><span class="token punctuation">(</span>match<span class="token punctuation">,</span> p1<span class="token punctuation">,</span> p2<span class="token punctuation">,</span> <span class="token comment">/* …, */</span> pN<span class="token punctuation">,</span> offset<span class="token punctuation">,</span> string<span class="token punctuation">,</span> groups<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> replacement<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>注意：</p> <ol><li>字符串默认只被替换一次，要进行全局替换应使用<strong>带有 g 标志的正则</strong>或 <strong>replaceAll()函数</strong></li> <li>不改变原字符串</li></ol></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">&quot;Mr Blue has a blue house and a blue car&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> n <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">blue</span><span class="token regex-delimiter">/</span><span class="token regex-flags">gi</span></span><span class="token punctuation">,</span> <span class="token string">&quot;red&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Mr red has a red house and a red car</span>
</code></pre></div><h1 id="async-await"><a href="#async-await" class="header-anchor">#</a> async/await</h1> <h1 id="set-集合"><a href="#set-集合" class="header-anchor">#</a> Set 集合</h1> <p>Set 本身是一个构造函数，用于生成 Set 数据结构，成员值是唯一的</p> <h2 id="原型方法"><a href="#原型方法" class="header-anchor">#</a> 原型方法</h2> <table><thead><tr><th>原型方法</th> <th>描述</th> <th>其他</th></tr></thead> <tbody><tr><td>Set.prototype.add(value)：</td> <td>添加某个值，返回 Set 结构本身。</td> <td></td></tr> <tr><td>Set.prototype.delete(value)：</td> <td>删除某个值，返回一个布尔值，表示删除是否成功。</td> <td></td></tr> <tr><td>Set.prototype.has(value)：</td> <td>返回一个布尔值，表示该值是否为 Set 的成员。</td> <td></td></tr> <tr><td>Set.prototype.clear()：</td> <td>清除所有成员，没有返回值。</td> <td></td></tr></tbody></table> <p>Set.prototype.keys()：|返回键名的遍历器
Set.prototype.values()：|返回键值的遍历器
Set.prototype.entries()：|返回键值对的遍历器
Set.prototype.forEach()：|使用回调函数遍历每个成员</p> <h2 id="应用-实现交集、并集、差集"><a href="#应用-实现交集、并集、差集" class="header-anchor">#</a> 应用：实现交集、并集、差集</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//并集</span>
<span class="token keyword">let</span> union <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">,</span> <span class="token operator">...</span>b<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//交集</span>
<span class="token keyword">let</span> intersect <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> b<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//差集</span>
<span class="token keyword">let</span> difference <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span>b<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="map-哈希"><a href="#map-哈希" class="header-anchor">#</a> Map 哈希</h1> <p>js 的对象本质上就是键值对的集合，但只能使用字符串作为键</p> <p>ES6 提供的 Map 数据结构，使得各种类型的值都可作为键</p> <h2 id="原型方法-2"><a href="#原型方法-2" class="header-anchor">#</a> 原型方法</h2> <table><thead><tr><th>原型方法</th> <th>描述</th> <th>使用示例</th></tr></thead> <tbody><tr><td>Map.prototype.set(key, value)</td> <td></td> <td></td></tr> <tr><td>Map.prototype.get(key)</td> <td></td> <td></td></tr> <tr><td>Map.prototype.has(key)</td> <td></td> <td></td></tr> <tr><td>Map.prototype.delete(key)</td> <td></td> <td></td></tr> <tr><td>Map.prototype.clear()</td> <td></td> <td></td></tr></tbody></table> <h2 id="call、apply、bind"><a href="#call、apply、bind" class="header-anchor">#</a> call、apply、bind</h2> <table><thead><tr><th>函数</th> <th>描述</th> <th>使用示例</th></tr></thead> <tbody><tr><td>call(obj,...args)</td> <td></td> <td></td></tr> <tr><td>apply(ovj,[args])</td> <td></td> <td>function.apply()</td></tr> <tr><td>bind(obj,...args)</td> <td>将函数绑定到一个指定对象</td> <td>function.bind()</td></tr></tbody></table> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">//bind函数将函数绑定到一个指定对象上，</span>

<span class="token keyword">var</span> <span class="token function-variable function">test</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token string">&quot;12345&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> new_a <span class="token operator">=</span> <span class="token function">test</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token function">new_a</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="立即执行函数"><a href="#立即执行函数" class="header-anchor">#</a> 立即执行函数</h1> <p>immeidate invoked function expression IIFE
只执行一次，执行完毕立即释放，而不是一直在 GO 中</p> <p>特点：</p> <ul><li>独立的作用域，创建一个与外界没有任何关系的作用域</li> <li>执行完成后立即销毁</li> <li>ES3、ES5 没有模块概念，立即执行函数可以向外界抛出一系列属性方法</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//写法一</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// console.log(a+b)</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//写法二:括号包裹起来的是表达式</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//此处立即执行函数前面加上分号的原因是：当有多个立即执行函数放在一起时，js引擎无法识别括号与括号之间的关系，什么是表达式什么是函数什么是语句</span>
<span class="token comment">//由于早期开发者的不喜欢写分号的习惯，如今约定立即执行函数前面都需要打一个分号来避免出现错误</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;this is a test&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="易错点"><a href="#易错点" class="header-anchor">#</a> 易错点</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//被括号括起来的，是表达式</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">test1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">//1</span>
<span class="token comment">//表达式</span>
<span class="token keyword">var</span> <span class="token function-variable function">res</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//2</span>

<span class="token keyword">function</span> <span class="token function">test3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>       <span class="token comment">//此处添加一个括号，报错，syntaxError</span>

<span class="token operator">+</span> <span class="token keyword">function</span> <span class="token function">test4</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>     <span class="token comment">//或者：1 &amp; function test4(){</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>   <span class="token comment">//函数声明前面添加运算符，将其转为表达式即刻执行</span>
</code></pre></div><h2 id="this-指向问题"><a href="#this-指向问题" class="header-anchor">#</a> this 指向问题</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//普通函数中的this指向window，</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">lg</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>    <span class="token comment">//此处相当于window.test(),也就是由window对象进行调用，故该函数中的this指向window</span>

<span class="token comment">//普通对象的函数属性中的this指向该对象本身，</span>
<span class="token keyword">var</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
  <span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token function-variable function">test</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
obj<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>    <span class="token comment">//obj</span>

<span class="token comment">//构造函数中的this指向new出来的实例</span>
<span class="token keyword">function</span> <span class="token function">Test</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name
<span class="token punctuation">}</span>
<span class="token keyword">var</span> test<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Test</span><span class="token punctuation">(</span><span class="token string">'张三'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>test<span class="token punctuation">.</span>name<span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">)</span>      <span class="token comment">//张三,Test{name:'张三'}</span>

<span class="token comment">//原型上的方法，内部this指向仍然是构造函数实例化出来的对象</span>
<span class="token class-name">Test</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">say</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>      <span class="token comment">//张三</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>       <span class="token comment">//Test{name:'张三'}</span>
<span class="token punctuation">}</span>

<span class="token comment">//DOM元素上绑定的处理函数，内部的this指向为DOM元素本身</span>
<span class="token comment">//&lt;button id=&quot;mybtn&quot;&gt;点我&lt;/button&gt;</span>
<span class="token keyword">var</span> Btn<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'mybtn'</span><span class="token punctuation">)</span>
Btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>         <span class="token comment">//&lt;button id=&quot;mybtn&quot;&gt;点我&lt;/button&gt;</span>
<span class="token punctuation">}</span>
<span class="token comment">//定时器中的setTimeout中的this指向window</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">2000</span><span class="token punctuation">)</span>      <span class="token comment">//window{...}</span>
</code></pre></div><h2 id="typeof-函数及其再封装"><a href="#typeof-函数及其再封装" class="header-anchor">#</a> typeof 函数及其再封装</h2> <h3 id="typeof-函数存在问题"><a href="#typeof-函数存在问题" class="header-anchor">#</a> typeof 函数存在问题</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">typeof</span> <span class="token number">12</span><span class="token punctuation">;</span> <span class="token comment">//number</span>
<span class="token keyword">typeof</span> <span class="token string">&quot;abc&quot;</span><span class="token punctuation">;</span> <span class="token comment">//string</span>
<span class="token keyword">typeof</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">//boolean</span>
<span class="token keyword">typeof</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span> <span class="token comment">//undefined</span>
<span class="token keyword">typeof</span> <span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">//function</span>
<span class="token keyword">typeof</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token comment">//object</span>
<span class="token keyword">typeof</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">//object</span>
<span class="token keyword">typeof</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//object</span>
<span class="token keyword">typeof</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//object</span>
<span class="token keyword">typeof</span> <span class="token operator">/</span>\w<span class="token operator">+</span><span class="token operator">/</span><span class="token punctuation">;</span> <span class="token comment">//object</span>
</code></pre></div><h3 id="object-prototype-tostring-call-方法"><a href="#object-prototype-tostring-call-方法" class="header-anchor">#</a> Object.prototype.toString.call()方法</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">&quot;12&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//object String</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//object Undefined</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//object Boolean</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//object Object</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//object Array</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//object Date</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\w</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//object RegExp</span>
</code></pre></div><h4 id="typeof-再封装"><a href="#typeof-再封装" class="header-anchor">#</a> typeof 再封装</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">myTypeof</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> type <span class="token operator">=</span> <span class="token keyword">typeof</span> val<span class="token punctuation">,</span>
    toStr <span class="token operator">=</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">;</span>
  <span class="token keyword">const</span> dict <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&quot;[object Object]&quot;</span><span class="token operator">:</span> <span class="token string">&quot;object&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;[object Array]&quot;</span><span class="token operator">:</span> <span class="token string">&quot;array&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;[object Boolean]&quot;</span><span class="token operator">:</span> <span class="token string">&quot;boolean&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;[object String]&quot;</span><span class="token operator">:</span> <span class="token string">&quot;string&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;[object Date]&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Date&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;[object RegExp]&quot;</span><span class="token operator">:</span> <span class="token string">&quot;repexp&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;[object Number]&quot;</span><span class="token operator">:</span> <span class="token string">&quot;number&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">&quot;null&quot;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">&quot;object&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> dict<span class="token punctuation">[</span><span class="token function">toStr</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> type<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>封装完成的工具函数应该放在 untils.js 后者 tools.js 文件当中,在入口文件 index.html 中通过 script 标签引入，在 untils.js 文件书写格式如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
  *name:工具类函数集合
  *author:
  *version:1.0
  *description:一些描述
  *dateTime:20240115

*/</span>
<span class="token comment">//方法一：使用块作用域命名空间，将工具方法通过键值对的方式放在一个对象当中</span>
<span class="token keyword">var</span> CommonTools<span class="token operator">=</span><span class="token punctuation">{</span>
  <span class="token comment">/*对工具类函数进行一定的描述
    *name:
    *description：

  */</span>
  <span class="token function-variable function">a</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

  <span class="token punctuation">}</span>
  <span class="token function-variable function">b</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">//方法二：使用立即执行函数</span>
<span class="token keyword">var</span> commTools<span class="token operator">=</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">var</span> <span class="token function-variable function">a</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

  <span class="token punctuation">}</span>
  <span class="token keyword">var</span> <span class="token function-variable function">b</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">a</span><span class="token operator">:</span>a<span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span>b
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>


</code></pre></div><h1 id="object-对象"><a href="#object-对象" class="header-anchor">#</a> Object 对象</h1> <h2 id="对象方法-2"><a href="#对象方法-2" class="header-anchor">#</a> 对象方法</h2> <h3 id="objdect-create"><a href="#objdect-create" class="header-anchor">#</a> Objdect.create()</h3> <ul><li>作用：以一个现有对象为原型创建一个新对象</li> <li>语法：Object.create(proto, propertiesObject)</li> <li>参数：1. proto：新创建对象的原型对象 2.</li></ul> <h3 id="object-defineproperty"><a href="#object-defineproperty" class="header-anchor">#</a> Object.defineProperty()</h3> <ul><li>语法：Object.defineProperty(obj, prop, descriptor)
<blockquote><p>参数：
obj：要定义属性的对象
prop:要定义或修改的属性键
descriptor：要定义或更改的属性描述符，每次只能设置一种</p> <ul><li>属性描述符&gt;数据描述符
value:属性的值，默认 undefined
writable:属性的值是否可写，默认 false</li> <li>属性描述符 &gt; 访问器描述符
get:用作属性的 getter 函数，访问属性时调用该函数
set:用作属性的 setter 函数，属性被赋值时调用该函数</li></ul></blockquote></li> <li>作用：在一个对象上定义一个新属性或修改其现有属性</li> <li>返回：被修改后的对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> object1 <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>object1<span class="token punctuation">,</span> <span class="token string">&quot;property1&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
  <span class="token literal-property property">writable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

object1<span class="token punctuation">.</span>property1 <span class="token operator">=</span> <span class="token number">77</span><span class="token punctuation">;</span>
<span class="token comment">// Throws an error in strict mode</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>object1<span class="token punctuation">.</span>property1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//22</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> bValue <span class="token operator">=</span> <span class="token number">38</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>o<span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> bValue<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    bValue <span class="token operator">=</span> newValue<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">enumerable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
o<span class="token punctuation">.</span>b<span class="token punctuation">;</span> <span class="token comment">// 38</span>
</code></pre></div><h4 id="属性描述符"><a href="#属性描述符" class="header-anchor">#</a> 属性描述符</h4> <ul><li>分为数据描述符合访问器描述符</li> <li>数据描述符：具有可写或不可写值的属性</li> <li>访问器描述符：由 getter/setter 函数对描述的属性</li></ul> <table><thead><tr><th>数据描述符</th> <th>描述</th></tr></thead> <tbody><tr><td>enumerable</td> <td>该属性是否可枚举</td></tr> <tr><td>value</td> <td>属性值</td></tr> <tr><td>writable</td> <td>该属性值是否可更改</td></tr> <tr><td>configurable</td> <td></td></tr></tbody></table> <div class="language-js extra-class"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">&quot;key&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&quot;static&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">enumerable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token literal-property property">writable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="url-对象"><a href="#url-对象" class="header-anchor">#</a> URL 对象</h1> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> baseUrl <span class="token operator">=</span> <span class="token string">&quot;http://www.baidu.com&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span>baseUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="对象属性"><a href="#对象属性" class="header-anchor">#</a> 对象属性</h2> <h3 id="host"><a href="#host" class="header-anchor">#</a> host</h3> <ul><li>返回主机名（带端口号）</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">&quot;https://developer.mozilla.org/zh-CN/docs/Web/API/URL/host&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> url<span class="token punctuation">.</span>host<span class="token punctuation">;</span> <span class="token comment">// &quot;developer.mozilla.org&quot;</span>

<span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span>
  <span class="token string">&quot;https://developer.mozilla.org:4097/zh-CN/docs/Web/API/URL/host&quot;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> url<span class="token punctuation">.</span>host<span class="token punctuation">;</span> <span class="token comment">// &quot;developer.mozilla.org:4097&quot;</span>
</code></pre></div><h3 id="hostname"><a href="#hostname" class="header-anchor">#</a> hostname</h3> <ul><li>仅返回主机名</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span>
  <span class="token string">&quot;https://developer.mozilla.org/zh-CN/docs/Web/API/URL/hostname&quot;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> url<span class="token punctuation">.</span>hostname<span class="token punctuation">;</span> <span class="token comment">// 'developer.mozilla.org'</span>
</code></pre></div><h3 id="pathname"><a href="#pathname" class="header-anchor">#</a> pathname</h3> <ul><li>返回网址的 URL 路径</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span>
  <span class="token string">&quot;https://developer.mozilla.org/zh-CN/docs/Web/API/URL/pathname&quot;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> url<span class="token punctuation">.</span>pathname<span class="token punctuation">;</span> <span class="token comment">// &quot;/zh-CN/docs/Web/API/URL/pathname&quot;</span>
</code></pre></div><h3 id="seacrchparams"><a href="#seacrchparams" class="header-anchor">#</a> seacrchParams</h3> <ul><li>返回 URLSearchParams 对象，该对象包含当前 URL 中的 params 参数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//</span>
<span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token string">&quot;https://example.com/?name=Smith&amp;age=18&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> params <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span>searchParams<span class="token punctuation">;</span>
<span class="token keyword">let</span> name <span class="token operator">=</span> params<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;Smith&quot;.</span>
<span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;age&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 18</span>
</code></pre></div><h1 id="blob-file-arraybuffer-等对象"><a href="#blob-file-arraybuffer-等对象" class="header-anchor">#</a> Blob/File/ArrayBuffer 等对象</h1> <ul><li><p>一个不可变的、原始数据的类文件对象，
<img src="/project-img/js相关/Blob等对象的关系.png"></p></li> <li><p>Blob(binary large object，二进制大对象)，可以存储大量二进制编码格式的数据，Blob 对象不可修改，只能呢个通关过 FileReader 读取内容</p></li> <li><p>语法：new Blob(array,options)</p> <blockquote><p>参数：</p> <ul><li>array:一个可迭代对象，比如 Array，包含 ArrayBuffer、TypedArray、DataView、Blob、字符串或者任意这些元素的混合</li> <li>options:如下表</li></ul></blockquote></li></ul> <table><thead><tr><th>MIME 类型</th> <th>描述</th></tr></thead> <tbody><tr><td>text/plain</td> <td>纯文本文档</td></tr> <tr><td>text/html</td> <td>html 文档</td></tr> <tr><td>text/javascript</td> <td>js 文档</td></tr> <tr><td>text/css</td> <td>css 文档</td></tr> <tr><td>application/json</td> <td>json 文件</td></tr> <tr><td>application/pdf</td> <td>pdf 文件</td></tr> <tr><td>application/xml</td> <td>...</td></tr> <tr><td>image/jpeg</td> <td>...</td></tr> <tr><td>image/png</td> <td>...</td></tr> <tr><td>image/gif</td> <td>...</td></tr> <tr><td>image/svg+xml</td> <td>svg 图像</td></tr> <tr><td>audio/mpeg</td> <td>mp3 文件</td></tr> <tr><td>vdeo/mpeg</td> <td>mp4 文件</td></tr></tbody></table> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> blob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;helloWorld&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;text/plain&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><img src="/project-img/js相关/新建blob对象.png"> <h2 id="blob-slice-方法"><a href="#blob-slice-方法" class="header-anchor">#</a> Blob.slice()方法</h2> <ul><li>语法：slice(start, end, contentType)</li> <li>作用：对 Blob 对象进行切片并返回一个新的 Blob 对象
<blockquote><p>参数：</p> <ul><li>start：切片的起始位置，默认 0，即从第一个字节开始</li> <li>end：切片的结束位置：默认 blob.size，即最后一个字节</li> <li>contentType:用于设置新生成的 Blob 对象的 MIME 类型，默认继承原 Blob 对象</li></ul></blockquote></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> blob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;helloWorld&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;text/plain&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> new_blob <span class="token operator">=</span> blob<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> reader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
reader<span class="token punctuation">.</span><span class="token function">readAsText</span><span class="token punctuation">(</span>new_blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
reader<span class="token punctuation">.</span>result<span class="token punctuation">;</span>

<span class="token comment">// 输出结果</span>
<span class="token comment">// he</span>
</code></pre></div><img src="/project-img/js相关/blob对象切片与读取.png"> <h1 id="file-对象"><a href="#file-对象" class="header-anchor">#</a> File 对象</h1> <ul><li>实质上是一个特殊的 Blob 对象</li></ul> <p><strong>js 中获取 File 对象的方法</strong></p> <ul><li>通过 input 标签选择文件得到 FileList 对象</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> fileInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    fileInput<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>files<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><img src="/project-img/js相关/通过input标签获取File对象.png"> <ul><li>文件拖放生成 DataTransfer 对象</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> dropArea <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    dropArea<span class="token punctuation">.</span><span class="token function-variable function">ondragover</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    dropArea<span class="token punctuation">.</span><span class="token function-variable function">ondrop</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">let</span> files <span class="token operator">=</span> event<span class="token punctuation">.</span>dataTransfer<span class="token punctuation">.</span>files<span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>files<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="filereader"><a href="#filereader" class="header-anchor">#</a> FileReader</h1> <ul><li>web 应用程序异步读取文件内容，通常是 File 对象或 Blob 对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> blob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;helloWorld&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;text/plain&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> new_blob <span class="token operator">=</span> blob<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> reader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
reader<span class="token punctuation">.</span><span class="token function">readAsText</span><span class="token punctuation">(</span>new_blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
reader<span class="token punctuation">.</span>result<span class="token punctuation">;</span>

<span class="token comment">// 输出结果</span>
<span class="token comment">// hello</span>
</code></pre></div><h2 id="实例方法"><a href="#实例方法" class="header-anchor">#</a> 实例方法</h2> <ul><li><p>readAsArrayBuffer():读取指定 Blob 中的内容,完成之后,result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象;</p></li> <li><p>readAsDataURL():读取指定 Blob 中的内容,完成之后,result 属性中将包含一个 data: URL 格式的 Base64 字符串以表示所读取文件的内容。</p></li> <li><p>readAsText():读取指定 Blob 中的内容,完成之后,result 属性中将包含一个字符串以表示所读取的文件内容。</p></li> <li><p>使用步骤</p> <blockquote><p>实例化 FileReader 对象
调用实例方法处理 File 对象或 Blob 对象
在实例对象的 result 查看读取结果</p></blockquote></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">let</span> fileInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    fileInput<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>files<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">let</span> reader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      reader<span class="token punctuation">.</span><span class="token function">readAsText</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reader<span class="token punctuation">.</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>blob+fileReader 实现图片预览功能</li></ul> <p>当需要在前端预览用户上传的图片时，可以将图片文件转换为 Blob 对象，并通过 FileReader 对象读取图片数据，然后显示在页面上</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">const</span> fileInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    fileInput<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;change&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> file <span class="token operator">=</span> fileInput<span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> reader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
      reader<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;img&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        image<span class="token punctuation">.</span>src <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>result<span class="token punctuation">;</span>
        document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token comment">//虽然读取结果存在fileReader实例对象的result属性中，但是该操作是异步的，故需要使用回调函数</span>
      reader<span class="token punctuation">.</span><span class="token function">readAsDataURL</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="object-url"><a href="#object-url" class="header-anchor">#</a> Object URl</h1> <ul><li>用来表示 FileObject 或 Blob Object 的 Url</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">const</span> fileInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    fileInput<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> file <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="base64"><a href="#base64" class="header-anchor">#</a> base64</h1> <ul><li>js 中编码和解码 base64 字符串</li> <li>atob():解码一个 base64 字符串</li> <li>btoa():编码，将一个字符串或二进制数据编码为一个 base64 字符串</li></ul> <img src="/project-img/js相关/base64与字符串互转.png"> <h1 id="formdata-构造函数"><a href="#formdata-构造函数" class="header-anchor">#</a> FormData 构造函数</h1> <ul><li><p>用于创建一个新的 FormData 对象</p></li> <li><p>FormData.append()</p></li> <li><p>语法：formData.append(name,value,filename)</p></li> <li><p>作用：向 FormData 对象的一个已经存在的键中添加一个新值，如果键不存在则添加该键</p> <blockquote><p>参数
name:键名(表单名)
value:值（表单值，）</p></blockquote></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;username&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Chris&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;userpic&quot;</span><span class="token punctuation">,</span> myFileInput<span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">&quot;chris.jpg&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>FormData.delete()</li></ul> <p>从 FormData 对象里面删除一个键值对</p> <ul><li>FormData.has()</li></ul> <p>判断 FormData 对象中是否包含某些键</p> <ul><li>FormData.entries()</li></ul> <p>返回一个包含所有键值对的 iterator 对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;key1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;value1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;key2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;value2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> pair <span class="token keyword">of</span> formData<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pair<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 执行结果</span>
<span class="token comment">// Array [ &quot;key1&quot;, &quot;value1&quot; ]</span>
<span class="token comment">// Array [ &quot;key2&quot;, &quot;value2&quot; ]</span>
</code></pre></div><ul><li>FormData.keys()</li></ul> <p>返回一个包含所有键的 iterator 对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;key1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;value1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;key2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;value2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">of</span> formData<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 执行结果</span>
<span class="token comment">// key1</span>
<span class="token comment">// key2</span>
</code></pre></div><ul><li>FormData.values()</li></ul> <p>返回一个包含所有值的 iterator 对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;key1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;value1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
formData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;key2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;value2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> value <span class="token keyword">of</span> formData<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 执行结果</span>
<span class="token comment">// value2</span>
<span class="token comment">// value1</span>
</code></pre></div><h2 id="formdata-对象使用"><a href="#formdata-对象使用" class="header-anchor">#</a> FormData 对象使用</h2> <ul><li>浏览器中</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> form <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
form<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;my_field&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;my value&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
form<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;my_buffer&quot;</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
form<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;my_file&quot;</span><span class="token punctuation">,</span> fileInput<span class="token punctuation">.</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&quot;https://example.com&quot;</span><span class="token punctuation">,</span> form<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>nodejs 中</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">&quot;axios&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> form <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
form<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;my_field&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;my value&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
form<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">&quot;my_buffer&quot;</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;some content&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&quot;https://example.com&quot;</span><span class="token punctuation">,</span> form<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="拖拽相关"><a href="#拖拽相关" class="header-anchor">#</a> 拖拽相关</h1> <h2 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h2> <ul><li>dragstart：用户开始拖动<strong>元素或被选择的文本</strong>时</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;dragstart&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function-variable function">ondragstart</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><p>dragend：拖放操作结束时触发，通常指释放鼠标按钮</p></li> <li><p>dragover:在<strong>元素或者被选择的文本</strong>被拖进一个有效的放置目标时触发,通常指在放置目标上</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;dragover&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function-variable function">ondragover</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>dragenter :<strong>元素或者被选择的文本</strong>进入一个有效的放置目标时触发</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;dragleave&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function-variable function">ondragleave</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="生成二维码-qrcode-库"><a href="#生成二维码-qrcode-库" class="header-anchor">#</a> 生成二维码 QRcode 库</h1> <ul><li>好的博客：https://juejin.cn/post/6844903719255932936</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/awesome-notebook/assets/js/app.5520c9b0.js" defer></script><script src="/awesome-notebook/assets/js/2.778bb4ad.js" defer></script><script src="/awesome-notebook/assets/js/1.50b457b8.js" defer></script><script src="/awesome-notebook/assets/js/29.dc9b14bd.js" defer></script>
  </body>
</html>
